<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select {
            width: 100px;
            height: 150px;
        }
    </style>
</head>
<body>
<select name="" id="left" multiple>
    <option value="">林志玲</option>
    <option value="">范冰冰</option>
    <option value="">陈奕迅</option>
    <option value="">周杰伦</option>
    <option value="">胡歌</option>
    <option value="">爱谁谁</option>
</select>
<input type="button" value=">>" id="btn1"/>
<input type="button" value="<<" id="btn2"/>
<input type="button" value=">" id="btn3"/>
<input type="button" value="<" id="btn4"/>
<select name="" id="right" multiple>
</select>

<script src="common.js"></script>
<script>
    //1.获取元素
    var selectLeft = id("left");
    var selectRight = id("right");
    var allToRight = id("btn1"); //全部去右边的按钮
    var allToLeft = id("btn2"); //全部去左边的按钮
    var selectToRight = id("btn3"); //选中的去右边
    var selectToLeft = id("btn4"); //选中去左边

    //2.分别给按钮注册单击事件
    allToRight.onclick = function () {
        var opr = selectLeft.children;
        for (var i = 0; i<selectLeft.children.length; i++) {
            selectRight.appendChild(opr[i]);
            i--;
        }
    }

    allToLeft.onclick = function () {
        var opr = allToRight.children;
        for (var i = 0; i<selectRight.children.length; i++) {
            selectLeft.appendChild(opr[i]);
            i--;
        }
    }





</script>
</body>
</html>